<template>
    <div class="medical-record-container">
      <van-nav-bar
        title="就诊记录"
        left-arrow
        @click-left="goBack"
      />
      <van-cell-group>
        <van-cell
          v-for="(record, index) in records"
          :key="index"
          :title="record.type"
          :border="false"
        >
          <template #label>
            <div v-if="record.type === '门诊'">
              <p>医院：{{ record.hospital }}</p>
              <p>服务医生：{{ record.doctor }}</p>
              <p>就诊时间：{{ record.time }}</p>
            </div>
            <div v-else>
              <p>医生：{{ record.doctor }}</p>
              <p>咨询内容：{{ record.content }}</p>
              <p>就诊时间：{{ record.time }}</p>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  const records = ref([
    {
      type: '门诊',
      hospital: '中心医院',
      doctor: '张天使',
      time: '2024/05/21 10:12:20'
    },
    {
      type: '在线问诊',
      doctor: '张天华',
      content: '咨询的内容，包括症状描述，问题描述，医生解答',
      time: '2024/05/20 10:12:20'
    },
    {
      type: '在线问诊',
      doctor: '张天华',
      content: '咨询的内容，包括症状描述，问题描述，医生解答',
      time: '2024/09/20 10:12:20'
    }
  ]);
  
  const goBack = () => {
    window.history.back();
  };
  </script>
  
  <style scoped>
  .medical-record-container {
    background-color: #ecf5ff;
    padding: 20px;
  }
  </style>